<template>
  <div>
    <vm-form-render
      :form-json="formJson"
      :form-data="formData"
      :option-data="optionData"
      ref="vmFormRef"
    >
    </vm-form-render>
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formJson: {
        formConfig: {
          background: '#EFEFEF',
          colon: false,
          cssCode: '',
          customClass: '',
          dataSources: [],
          functions: '',
          inputAlign: 'left',
          inputBorder: false,
          jsonVersion: -2,
          labelAlign: 'left',
          labelPosition: 'left',
          labelWidth: 80,
          layoutType: 'H5',
          modelName: 'formData',
          onFormCreated: '',
          onFormDataChange: '',
          onFormMounted: '',
          padding: 5,
          radius: 4,
          refName: 'vForm',
          rulesName: 'rules',
          size: ''
        },
        widgetList: [
          {
            category: 'container',
            icon: 'grid-sub-form',
            options: {
              actionColumnPosition: 'left',
              customClass: [],
              hidden: false,
              name: 'msubform48682',
              onSubFormRowAdd: '',
              onSubFormRowChange: '',
              onSubFormRowDelete: '',
              onSubFormRowInsert: '',
              showBlankRow: true,
              showRowNumber: true
            },
            type: 'm-sub-form',
            widgetList: [
              {
                formItemFlag: true,
                icon: 'text-field',
                options: {
                  appendButton: false,
                  appendButtonDisabled: false,
                  appendButtonIcon: 'search',
                  appendButtonLabel: '',
                  appendButtonType: 'primary',
                  clearable: true,
                  customClass: '',
                  defaultValue: '',
                  disabled: false,
                  hidden: false,
                  inputAlign: 'left',
                  label: 'm-input',
                  labelAlign: '',
                  labelHidden: false,
                  labelWidth: null,
                  leftIcon: '',
                  maxLength: null,
                  name: 'minput67952',
                  onAppendButtonClick: '',
                  onBlur: '',
                  onCreated: '',
                  onFocus: '',
                  onInput: '',
                  onMounted: '',
                  onValidate: '',
                  placeholder: '',
                  readonly: false,
                  required: false,
                  requiredHint: '',
                  rightIcon: '',
                  showWordLimit: false,
                  size: '',
                  type: 'text',
                  validation: '',
                  validationHint: ''
                },
                type: 'm-input',
                id: 'minput67952'
              },
              {
                formItemFlag: true,
                icon: 'text-field',
                options: {
                  appendButton: false,
                  appendButtonDisabled: false,
                  appendButtonIcon: 'search',
                  appendButtonLabel: '',
                  appendButtonType: 'primary',
                  clearable: true,
                  customClass: '',
                  defaultValue: '',
                  disabled: false,
                  hidden: false,
                  inputAlign: 'left',
                  label: 'm-input',
                  labelAlign: '',
                  labelHidden: false,
                  labelWidth: null,
                  leftIcon: '',
                  maxLength: null,
                  name: 'minput83262',
                  onAppendButtonClick: '',
                  onBlur: '',
                  onCreated: '',
                  onFocus: '',
                  onInput: '',
                  onMounted: '',
                  onValidate: '',
                  placeholder: '',
                  readonly: false,
                  required: false,
                  requiredHint: '',
                  rightIcon: '',
                  showWordLimit: false,
                  size: '',
                  type: 'text',
                  validation: '',
                  validationHint: ''
                },
                type: 'm-input',
                id: 'minput83262'
              }
            ],
            id: 'msubform48682'
          }
        ]
      },
      formData: {},
      optionData: {}
    }
  },
  methods: {
    submitForm() {
      this.$refs.vmFormRef
        .getFormData()
        .then((formData) => {
          // Form Validation OK
          alert(JSON.stringify(formData))
        })
        .catch((error) => {
          // Form Validation failed
          this.$message.error(error)
        })
    }
  }
}
</script>